<template>
  <div
      :class="[prefixCls + '-hue']"
      tabindex="0"
      @click="$el.focus()"
      @keydown.esc="handleEscape"
      @keydown.left="handleLeft"
      @keydown.right="handleRight"
      @keydown.up="handleUp"
      @keydown.down="handleDown"
  >
    <div
        ref="container"
        :class="[prefixCls + '-hue-container']"
        @mousedown="handleMouseDown"
        @touchmove="handleChange"
        @touchstart="handleChange">
      <div
          :style="{top: 0, left: `${percent}%`}"
          :class="[prefixCls + '-hue-pointer']">
        <div :class="[prefixCls + '-hue-picker']"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import HASMixin from './hsaMixin'
  import Prefixes from './prefixMixin'
  import { clamp } from './utils'

  export default {
    name: 'Hue',

    mixins: [HASMixin, Prefixes],

    data () {
      const normalStep = 1 / 360 * 25
      const jumpStep = 20 * normalStep

      return {
        left: -normalStep,
        right: normalStep,
        up: jumpStep,
        down: -jumpStep,
        powerKey: 'shiftKey',
        percent: clamp(this.value.hsl.h * 100 / 360, 0, 100)
      }
    },
    watch: {
      value () {
        this.percent = clamp(this.value.hsl.h * 100 / 360, 0, 100)
      }
    },
    methods: {
      change (percent) {
        this.percent = clamp(percent, 0, 100)

        const { h, s, l, a } = this.value.hsl
        const newHue = clamp(percent / 100 * 360, 0, 360)

        if (h !== newHue) {
          this.$emit('change', { h: newHue, s, l, a, source: 'hsl' })
        }
      },
      handleSlide (e, direction) {
        e.preventDefault()
        e.stopPropagation()

        if (e[this.powerKey]) {
          this.change(direction < 0 ? 0 : 100)
          return
        }

        this.change(this.percent + direction)
      },
      handleChange (e) {
        e.preventDefault()
        e.stopPropagation()

        const left = this.getLeft(e)

        if (left < 0) {
          this.change(0)
          return
        }

        const { clientWidth } = this.$refs.container

        if (left > clientWidth) {
          this.change(100)
          return
        }

        this.change(left * 100 / clientWidth)
      }
    }
  }
</script>
